<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="8">
        <div class="pt-5">
          <span class="display-1 font-weight-bold">文章列表</span>
        </div>
        <div class="pt-4">
          <v-card class="mt-3" v-for="(article, i) in articleList" :key="i">
            <v-list-item>
              <v-list-item-avatar size="48" style="cursor:pointer;" @click="$router.push(`/article/${article.pk}`)">
                <v-img
                  class="elevation-6"
                  :src="article.fields.cover_image"
                ></v-img>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title class="subtitle-1 font-weight-bold">{{
                  article.fields.title
                }}</v-list-item-title>
              </v-list-item-content>
              <v-btn v-if="!check" color="primary" @click="follow"
                >+ 关注</v-btn
              >
              <v-btn
                v-if="check"
                color="info"
                @click="$router.push(`/edit/${article.pk}`)"
                >编辑</v-btn
              >
              <v-btn
                v-if="check"
                color="warning"
                class="ml-2"
                @click="deleteArticle(article.pk, article.fields.title)"
                >删除</v-btn
              >
            </v-list-item>
          </v-card>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      check: true,
      articleList: [],
      page: 1,
      no_more: false,
      flag: false, 
    };
  },
  created() {
    this.fetchArticle();
    window.addEventListener("scroll", this.scrollHandle, true);
  },
  methods: {
    async fetchArticle() {
      try {
        const res = await this.$http.get(
          `article_list_by_name/?name=${localStorage.getItem("name")}&page=${this.page}`
        );
        if (res.data.error_num === 1) {
          this.no_more = true;
        }
        this.articleList = [...this.articleList, ...res.data.list];
        this.articleList.forEach(article => {
          article.fields.cover_image = require(article.fields.cover_image);
        });
      } catch (e) {
        console.log("图片获取失败");
      }
    },
    more() {
      this.page++;
      this.fetchArticle();
    },
    async deleteArticle(id, title) {
      const confirm = await this.$dialog.warning({
        text: `确认是否删除文章${title}?`,
        icon: "fa-exclamation-triangle",
        title: "删除文章"
      });
      console.log(confirm);
      if (confirm) {
        const res = await this.$http.get(`delete_article/?id=${id}`);
        if (res.data.error_num === 0) {
          this.$toast({
            text: "删除成功",
            type: "success",
            duration: 3000
          });
          this.articleList = []
          this.page = 1
          this.fetchArticle();
        }
      }
    },
    scrollHandle() {
      // console.log(this.no_more)
      // console.log(this.flag)
      // 获取页面页面的滚动高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 获取页面滚动距离顶部的高度,  window.pageYOffse 兼容苹果
      let scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      // 获取页面的可视高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // console.log(scrollHeight);
      // console.log(scrollTop);
      // console.log(clientHeight);
      if (scrollTop + clientHeight >= scrollHeight - 20) {
        // 距离底部还有20的时候执行数据加载
        if (this.flag) return 
					this.flag = true
        if (!this.no_more) {
          console.log("加载数据");
          this.more();
          this.flag = false
        }
      }}
  },
  destroyed() {
    // 页面卸载时移除监听事件
    window.removeEventListener("scroll", this.scrollHandle, true);
    console.log('卸载滚动事件')
  }
};
</script>

<style></style>
